<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport"
		content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, width=device-width" />
	<meta name="format-detection" content="telephone=no">
	<meta name="renderer" content="webkit">
	<title>2021少数民族传统体育竞技</title>
	<link rel="stylesheet" type="text/css" href="css.css" />
</head>

<body>
	<style>
		.loading-box {
			position: fixed;
			width: 100vw;
			height: 100vh;
			top: 0;
			left: 0;
			background: rgba(255, 255, 255, 0.7);
			z-index: 99
		}

		.loading-box img {
			position: absolute;
			top: 50%;
			left: 50%;
			width: 50%;
			transform: translate(-50%, -50%);
		}
	</style>
	<div class="loading-box">
		<img src="./img/loading.gif" alt="">
	</div>
	<!--游戏规则-->
	<div class="rule" id="rule">
		<div class="content">
			<p>1.左右点击控制人物移动，躲避障碍。</p>
			<p>2.爬得越高，速度越快。</p>
			<p>3.攀爬至100米即可有机会赢取微信红包！</p>
		</div>
		<div class="handle" id="handle">
			<img src="../images/icon_zuo.png" />
			<span>点击开始游戏</span>
			<img src="../images/icon_you.png" />
		</div>
	</div>
	<!--计数-->
	<div class="number1">
		<h5>高度</h5>
		<span id="number">001 <em>M</em></span>
	</div>
	<div class="number2">
		<h5>倒计时</h5>
		<span id="number2">60 <em>S</em></span>
	</div>
	<!--游戏界面-->
	<div class="canvas_box">
		<img src="../images/bg_tree1.png" class="bg" id="bg" />
		<img src="../images/bg_tree1.png" class="bg" id="bg2" />
		<img src="../images/bg_tree3.png" class="tree" id="tree" />
		<img src="../images/bg_tree3.png" class="tree" id="tree2" />
		<div class="personleft" id="person"></div>
		<img src="../images/tree8.png" class="warningleft" id="warningleft" />
		<img src="../images/tree8.png" class="warningright" id="warningright" />
	</div>
	<!--点击区-->
	<div class="clickbox">
		<div class="left" id="left">

		</div>
		<div class="right" id="right">

		</div>
	</div>
	<!--游戏结束  达到-->
	<div class="meng" id="complete">
		<div class="alert">
			<div class="title">
				<img src="../images/title_index4.png" />
			</div>
			<div class="fraction">
				<h4 id="grade">105</h4>
			</div>
			<div class="btn_box">
				<!--点击抽奖-->
				<a href="../draw.html" id="draw">
					<img src="../images/btn_index13.png" />
				</a>
				<!--排行榜-->
				<a href="../ranking.html">
					<img src="../images/btn_index15.png" />
				</a>
				<!--小贴士-->
				<a href="#" onclick="$('.text_warp').show()">
					<img src="../images/btn_index14.png" />
				</a>
				<!--返回-->
				<a href="index.html">
					<img src="../images/btn_index25.png" />
				</a>
			</div>
		</div>
	</div>
	<!--游戏结束  未达到-->
	<div class="meng" id="fail">
		<div class="alert">
			<div class="title">
				<img src="../images/title_index5.png" />
			</div>
			<div class="fraction">
				<p>很遗憾，你失败了~</p>
				<p>需要达到<span id="prize">100</span>分才能抽奖哦</p>
			</div>
			<div class="btn_box">
				<!--再来一次-->
				<a href="">
					<img src="../images/btn_index16.png" />
				</a>
				<!--分享-->
				<a href="#">
					<img src="../images/btn_index17.png" />
				</a>
				<!--小贴士-->
				<a href="#" onclick="$('.text_warp').show()">
					<img src="../images/btn_index14.png" />
				</a>
				<!--返回-->
				<a href="index.html">
					<img src="../images/btn_index25.png" />
				</a>
			</div>
		</div>
	</div>
	<!--小贴士-->
	<div class="text_warp">

		<div class="box">
			<div class="text">
				<h5>攀爬椰子树</h5>
				<p>1.攀爬椰子树是一项非常消耗体力的运动。</p>
				<p>2.海南陵水曾在2017年12月7日举办第二届攀爬椰子树全国邀请赛。</p>
				<p>3.攀爬椰子树是一项海南少数民族传统体育项目。</p>
				<p>4.在攀爬椰子树的过程中，需要手脚并用、力量技巧并用。</p>
			</div>
			<!--返回首页-->
			<a href="index.html" class="btn">
				<img src="../images/btn_index18.png" />
			</a>
		</div>
	</div>
	<div class="pan">
		<img src="../images/123.gif" class="" />
	</div>
	<img src="../images/tree4.gif" id="chongimg" />
	<img src="../images/tree5.gif" id="guoimg" />
	<audio src="../images/222.mp3" id="audio"></audio>
	<script src="../js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<script src="../js/jquery-3.1.0.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/resLoader.js" type="text/javascript" charset="utf-8"></script>
	<script src="./js/request.js"></script>
	<script type="text/javascript">
		let flag = false
		request('get_share_sign/', {
			zm_token: localStorage.user_token,
			_zm_post_type: 'ajax',
			url: location.href
		}).then(res => {
			wx.config({
				debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
				appId: res.rsm.appId, // 必填，公众号的唯一标识
				timestamp: res.rsm.timestamp, // 必填，生成签名的时间戳
				nonceStr: res.rsm.nonceStr, // 必填，生成签名的随机串
				signature: res.rsm.signature, // 必填，签名
				jsApiList: ['onMenuShareTimeline',
					'onMenuShareAppMessage',
					'onMenuShareQQ',
					'onMenuShareWeibo',
					'onMenuShareQZone',
					'onMenuShareTimeline',
					'updateAppMessageShareData',
					'hideOptionMenu',
					'showOptionMenu',
					'hideMenuItems',
					'showMenuItems',
					'hideAllNonBaseMenuItem',
					'showAllNonBaseMenuItem',
				] // 必填，需要使用的JS接口列表
			});
			wx.ready(function () { //需在用户可能点击分享按钮前就先调用
				wx.hideAllNonBaseMenuItem();
			});
		})
		let gameNumber = Number(JSON.parse(localStorage.getItem('game1')).number)
		let gameTimer = 60
		if (gameNumber == 0) {
			$('.rule').hide()
			let loadingTimer = setTimeout(() => {
				$('.rule').show()
				$('.loading-box').hide()
				clearTimeout(loadingTimer)
				let obj = JSON.parse(localStorage.getItem('game1'))
				obj.number = 1
				gameNumber = 1
				localStorage.setItem('game1', JSON.stringify(obj))
			}, 5000)
		} else {
			$('.loading-box').hide()
		}

		var g;
		$(function () {

			$("#draw").click(function () {
				$(".pan").show()
			})

			//默认播放音乐
			var audio = document.getElementById('audio');
			audio.play();
			window.onload = function () {
				document.addEventListener("WeixinJSBridgeReady", function () {
					audio.play();
				}, false);
			}

			var loader = new resLoader({
				resources: [
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_1.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_2.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_3.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_4.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_1.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_2.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_3.png",
					"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_4.png"
				],
				onStart: function (total) {
					// console.log('start:' + total);
				},
				onProgress: function (current, total) {
					var percent = Math.ceil(current / total * 100);
					//变化 percent为百分比
				},
				onComplete: function (total) {
					//加载完成
					setTimeout(function () {
						g = {
							itv_ids: [], //用于记录定时器id，便于一起clear掉，减少内存消耗
							chongimg: 'http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4.gif', //虫子
							chongimages: [
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_1.png",
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_2.png",
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_3.png",
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree4_4.png"
							],
							chongw: $("#chongimg").width(),
							chongh: $("#chongimg").height(),
							chongfanimg: '../images/tree6.gif', //虫子
							chongfanimages: [
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_1.png",
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_2.png",
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_3.png",
								"http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree6_4.png"
							],
							guoimg: 'http://gqtx2019.hqhd.net/assets/yundonghui/demo/images/tree5.gif', //果子
							guow: $("#guoimg").width(),
							guoh: $("#guoimg").height(),
							windowW: screen.availWidth,
							windowH: screen.availHeight,
							left: true,
							right: false,
							bgleft: 25, //树偏移量
							personbottom: 280, //小人距底部距离
							gospeed: 2.5, //攀爬的速度
							bgspeed: 1, //背景移动的速度
							godistance: 0, //初始米数
							bgjuli: 0, //背景图的距离
							rectjian: 9, //掉落物品等比例缩小倍数
							chongrectjian: 6.5, //掉落物品等比例缩小倍数
							rectSpeedMin: 1, //方块速度最小值
							rectSpeedMax: 5, //方块速度最大值
							rectFlowNumForSec: 2, //每秒下落果子个数
							game_over: false, //游戏是否结束
							speedbian: 10, //每几米变一次速度
							speedliane: 0.2, //每次加速
							speednow: 1, //当前变了几次数
							prize: 100, //超过多少分之后可以去抽奖
						};
						// console.log(g)
					}, 50)
				}
			});
			loader.start();

		})

		$("#handle").click(function () {
			request('begin_tree/', {
				zm_token: localStorage.user_token,
				_zm_post_type: 'ajax'
			}).then(res => {
				// console.log(res.rsm);
			})
			go()

			$("#rule").hide()
			$("#person").show()
		})


		//开始游戏
		function go() {
			g.itv_ids.push(
				setInterval(function () {
					//米数
					g.godistance++
					gameTimer--
					//变速
					if (parseInt(g.godistance / g.speedbian) >= g.speednow) {
						if (g.godistance == 50) {
							g.bgspeed++
							g.gospeed++
						}
						if (g.godistance == 100) {
							g.bgspeed++
							g.gospeed++
						}
						if (g.godistance == 150) {
							g.bgspeed++
							g.gospeed++
						}
						if (g.godistance == 200) {
							g.bgspeed++
							g.gospeed++
						}
						g.speednow++
						g.bgspeed += g.speedliane
						g.gospeed += g.speedliane
					}
					$("#number").html(g.godistance + '<em>M</em>')
					$("#number2").html(gameTimer + '<em>S</em>')
					if (gameTimer == 0) {
						game_over()
						g.game_over = true;
					}
				}, 1000)
			)

			$("#bg2").css("bottom", $("#bg").height())
			$("#tree2").css("bottom", $("#tree").height())
			g.itv_ids.push(
				setInterval(function () {
					//背景
					$("#bg").css("bottom", ($("#bg").css("bottom").split("px")[0] - g.bgspeed) + "px")
					$("#tree").css("bottom", ($("#tree").css("bottom").split("px")[0] - g.bgspeed) + "px")
					$("#bg2").css("bottom", ($("#bg2").css("bottom").split("px")[0] - g.bgspeed) + "px")
					$("#tree2").css("bottom", ($("#tree2").css("bottom").split("px")[0] - g.bgspeed) + "px")
					if ($("#bg").css("bottom").split("px")[0] <= parseInt(-$("#bg").height())) {
						var n = parseInt($("#bg").height()) - (-$("#bg").css("bottom").split("px")[0])
						// console.log(n)
						$("#bg").css("bottom", $("#bg").height())
					}
					if ($("#tree").css("bottom").split("px")[0] <= parseInt(-$("#tree").height())) {
						var n = parseInt($("#tree").height()) - (-$("#tree").css("bottom").split("px")[0])
						// console.log(n)
						$("#tree").css("bottom", $("#tree").height() - (-n))
					}
					if ($("#bg2").css("bottom").split("px")[0] <= parseInt(-$("#bg").height())) {
						var n = parseInt($("#bg").height()) - (-$("#bg2").css("bottom").split("px")[0])
						// console.log(n)
						$("#bg2").css("bottom", $("#bg").height() - (-n))
					}
					if ($("#tree2").css("bottom").split("px")[0] <= parseInt(-$("#tree").height())) {
						var n = parseInt($("#tree").height()) - (-$("#tree2").css("bottom").split("px")[0])
						// console.log(n)
						$("#tree2").css("bottom", $("#tree2").height() - (-n))
					}

				}, 10)
			)

			g.itv_ids.push(
				setInterval(function () {


					//						var arr = [true, false];
					//						var bol = arr[Math.floor(Math.random()*arr.length)];
					//						var bo2 = arr[Math.floor(Math.random()*arr.length)];

					//					var speed = get_random_num(g.rectSpeedMin,g.rectSpeedMax);//获取速度随机值

					var num2 = Math.floor(Math.random() * 10)

					if (num2 < 8) {
						if (num2 < 4) {
							var num = (g.windowW - g.chongw / (g.chongrectjian / 2)) / 2
							//								var div =$('<div></div>');
							var img = new Image()
							drawTheChong(img, true, num - g.bgleft, -10, g.chongw / g.chongrectjian, g.chongh / g
								.chongrectjian)
							//								drawTheRect(div,g.chongimg,num-g.bgleft,0,g.chongw/g.chongrectjian,g.chongh/g.chongrectjian)
						} else {
							var num = (g.windowW - g.chongw / g.chongrectjian) / 2
							var img = new Image()
							drawTheChong(img, false, num + g.bgleft * 2, -10, g.chongw / g.chongrectjian, g.chongh / g
								.chongrectjian)
							//								var div =$('<div></div>');
							//								drawTheRect(div,g.chongfanimg,num+g.bgleft*2,0,g.chongw/g.chongrectjian,g.chongh/g.chongrectjian)
						}

					} else {
						if (num2 < 9) {
							$("#warningleft").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeOut(
								100).fadeIn(100).fadeOut(100)
							$("#warningleft").hide()
							var num = (g.windowW - g.guow / (g.rectjian / 2)) / 2
							var div = $('<div></div>');
							drawTheRect(div, g.guoimg, num - g.bgleft * 2, 0, g.guow / g.rectjian, g.guoh / g
								.rectjian)
						} else {
							$("#warningright").fadeOut(100).fadeIn(100).fadeOut(100).fadeIn(100).fadeOut(100).fadeOut(
								100).fadeIn(100).fadeOut(100)
							var num = (g.windowW - g.guow / g.rectjian) / 2
							var div = $('<div></div>');
							drawTheRect(div, g.guoimg, num + g.bgleft * 4, 0, g.guow / g.rectjian, g.guoh / g
								.rectjian)
						}
					}
				}, 3000 / g.rectFlowNumForSec)
			)
		}

		//随机掉落的
		//虫子
		function drawTheChong(img, status, x, y, w, h) {

			// console.log(img, status, x, y, w, h)

			if (status) {

				var index = 0;

				var time2 = setInterval(function () {

					if (index > g.chongimages.length) index = 0;

					$(img).attr('src', g.chongimages[index++]);

				}, 100);
			} else {
				var index = 0;

				var time2 = setInterval(function () {

					if (index > g.chongfanimages.length) index = 0;

					$(img).attr('src', g.chongfanimages[index++]);

				}, 100);
			}

			var time = setInterval(function () {

				y += g.gospeed



				$(img).css({
					position: "absolute",
					top: y,
					left: x,
					width: w,
					height: h
				})
				$("body").append($(img))
				if (g.left) {
					if (checkRectImpact($("#person").offset().left, $("#person").offset().left + $("#person")
							.width() - 55, $("#person").offset().top, $("#person").offset().top + $("#person")
							.height() -
							45, x, x + w, y, y + h)) { //碰撞检测
						$(img).hide()
						clearInterval(time2);
						g.game_over = true;
						game_over();
						return;
					}
				} else {
					if (checkRectImpact($("#person").offset().left + 55, $("#person").offset().left + $("#person")
							.width(), $("#person").offset().top, $("#person").offset().top + $("#person").height() -
							45, x, x + w, y, y + h)) { //碰撞检测
						$(img).hide()
						clearInterval(time2);
						g.game_over = true;
						game_over();
						return;
					}
				}
				if (y > g.windowH) { //如果已经超过了画布的高度那么移除这个定时器，减少内存消耗
					$(img)[0].remove()
					clearInterval(time);
					clearInterval(time2);
				}
			}, 10);
		}

		//椰子
		function drawTheRect(div, img, x, y, w, h) {

			var time = setInterval(function () {
				//绘制虫子
				y += g.gospeed

				$(div).css({
					position: "absolute",
					background: "url(" + img + ") no-repeat center",
					backgroundSize: "100% 100%",
					top: y,
					left: x,
					width: w,
					height: h
				})
				$("body").append($(div))
				if (g.left) {
					if (checkRectImpact($("#person").offset().left, $("#person").offset().left + $("#person")
							.width() - 55, $("#person").offset().top, $("#person").offset().top + $("#person")
							.height() -
							45, x, x + w, y, y + h)) { //碰撞检测
						// console.log($(div))
						// console.log($(div).hide())
						$(div).hide()
						g.game_over = true;
						game_over();
						return;
					}
				} else {
					if (checkRectImpact($("#person").offset().left + 55, $("#person").offset().left + $("#person")
							.width(), $("#person").offset().top, $("#person").offset().top + $("#person").height() -
							45, x, x + w, y, y + h)) { //碰撞检测
						// console.log($(div))
						// console.log($(div).hide())
						$(div).hide()
						g.game_over = true;
						game_over();
						return;
					}
				}
				if (y > g.windowH) { //如果已经超过了画布的高度那么移除这个定时器，减少内存消耗
					$(div)[0].remove()
					clearInterval(time);
				}
			}, 10);
		}

		//检测碰撞
		function checkRectImpact(x1, x2, y1, y2, a1, a2, b1, b2) {
			return (x1 <= a1 && x2 >= a1 && y1 <= b1 && y2 >= b1) || (x1 <= a2 && x2 >= a2 && y1 <= b1 && y2 >= b1) || (x1 <=
				a2 && x2 >= a2 && y1 <= b2 && y2 >= b2) || (x1 <= a1 && x2 >= a1 && y1 <= b2 && y2 >= b2) || (x1 >= a1 &&
				x2 <= a2 && y2 >= b1 && y1 <= b1) || (x1 >= a1 && x2 <= a2 && y2 >= b2 && y1 <= b2) || (a1 >= x1 && a2 <=
				x2 && b2 >= y1 && b1 <= y1) || (a1 >= x1 && a2 <= x2 && b2 >= y2 && b1 <= y2);
		}

		//游戏结束
		function game_over() {
			// clearAllInterval();
			for (var i = 1; i < 1000; i++) {
				clearInterval(i);
			}
			// g.game_over = true;
			// setTimeout(function () {
			$("#person").css("background", "url(../images/hei.gif) no-repeat center")
			$("#person").css("background-size", "100% 100%")
			// }, 50)
			// setTimeout(function () { //如果不延迟可能会导致上一次绘画未完成就被阻塞了
			// if(g.godistance>=g.prize){
			// 	$("#complete").show()
			// }else{
			// 	$("#fail").show()
			// }
			// })
			if (g.game_over) {
				g.game_over = false
				request('end_tree/', {
					zm_token: localStorage.user_token,
					_zm_post_type: 'ajax',
					tree_score: g.godistance
				}).then(res => {
					g.game_over = false
					let game = locMemory.localStorage.getItem(`game1`)
					let gameState = game.active
					let obj = {
						score: g.godistance,
						active: gameState ? gameState : g.godistance >= locMemory.localStorage.getItem(
							'gameScore').tree_score,
						luck: game.luck,
						number: gameNumber
					}
					obj = JSON.stringify(obj)
					localStorage.setItem(`game1`, obj)
					location.href = `gameState.html?score=${g.godistance}`
					$("#grade").html(g.godistance) -
						$("#prize").html(g.prize)
					return false
				});
				return false
			}
		}

		//清除所有定时器
		function clearAllInterval() {
			for (var i in g.itv_ids) {
				r = g.itv_ids[i];
				clearInterval(r);
			}
		}

		//获取某个某个区间内的随机整数 ，获取到的值域为[min,max)
		function get_random_num(min, max) {
			if (/^-?\d+$/.test(min) && /^-?\d+$/.test(max) && max > min) {
				return parseInt(Math.random() * (max - min) + min);
			} else {
				return false;
			}
		}

		$("#left").click(function () {
			g.left = true
			g.right = false
			$("#person").removeClass("personright")
			$("#person").addClass("personleft")
		})
		$("#right").click(function () {
			g.left = false
			g.right = true
			$("#person").removeClass("personleft")
			$("#person").addClass("personright")
		})
	</script>
</body>

</html>